<template>
  <div>
    <!-- <h2>crm管理--合同详情-index</h2> -->
    <el-descriptions title="  ">
      <el-descriptions-item label="合同编号">{{curContractObj.contractNo}}</el-descriptions-item>
      <el-descriptions-item label="客户">{{curDetailsObj.customerName}}</el-descriptions-item>
      <el-descriptions-item label="经办人">{{curDetailsObj.empName}}</el-descriptions-item>

      <el-descriptions-item label="业务类型">
        <el-table :data="curContractCaseList"
                  :show-header="false">
          <el-table-column label=""
                           align="center"
                           prop="caseType"
                           width="260"
                           :formatter="formatContractCaseType"
                           :show-overflow-tooltip="true" />
        </el-table>
      </el-descriptions-item>

      <el-descriptions-item label="代理服务费">{{curContractObj.contractServiceCost}}.00(人民币)</el-descriptions-item>
      <el-descriptions-item label="官方费用">{{curContractObj.contractThirdCost}}.00(人民币)</el-descriptions-item>
      <el-descriptions-item label="合同状态">
        <el-table :data="curContractStatusList"
                  :show-header="false">
          <el-table-column label=""
                           align="center"
                           prop="contractStatus"
                           width="260"
                           :formatter="formatContractStatusType"
                           :show-overflow-tooltip="true" />
        </el-table>
      </el-descriptions-item>
      <el-descriptions-item label="签订时间">{{curContractObj.createTime}}
        <!-- <el-tag size="small">学校</el-tag> -->
      </el-descriptions-item>
    </el-descriptions>
    <br>

    <el-tabs v-model="activeName"
             @tab-click="handleClick">

      <el-tab-pane label="专利信息"
                   name="0">
        <div class="app-container">

          <el-descriptions title="">
            <el-descriptions-item label="专利名称">{{curDetailsObj.patentName}}</el-descriptions-item>
          </el-descriptions>
          <el-descriptions title="">
            <el-descriptions-item label="专利图标">
              <img v-if="curDetailsObj.patentIconUrl"
                   :src="curDetailsObj.patentIconUrl"
                   :width="100"
                   :height="100"
                   class="avatar">
              <i v-else
                 class="el-icon-plus avatar-uploader-icon"></i>
            </el-descriptions-item>
          </el-descriptions>
          <el-descriptions title="">
            <el-descriptions-item label="专利编号">{{curDetailsObj.patentNo}}</el-descriptions-item>
          </el-descriptions>
          <el-descriptions title="">
            <el-descriptions-item label="专利类型">
              <el-table :data="curPatentTypeList"
                        :show-header="false">
                <el-table-column label=""
                                 align="center"
                                 prop="patentType"
                                 width="80"
                                 :formatter="formatPatentType"
                                 :show-overflow-tooltip="true" />
              </el-table>
            </el-descriptions-item>
          </el-descriptions>
          <el-descriptions title="">
            <el-descriptions-item label="专利材料">
              <el-link :href="curDetailsObj.patentFileUrl"
                       target="_blank"
                       class="buttonText"
                       type="primary"
                       :underline="false">哥哥，点我下载</el-link>
            </el-descriptions-item>
          </el-descriptions>
          <!-- <el-input type="text" v-model="curDetailsObj.patentName" placeholder="" /> -->
          <el-divider />
        </div>
      </el-tab-pane>

      <el-tab-pane label="发明人"
                   name="1">
        <div class="app-container">
          <el-table v-loading="loading"
                    :data="curDetailsObj.inventorList"
                    stripe
                    @selection-change="handleSelectionChange">

            <el-table-column type="selection"
                             align="center" />
            <el-table-column label="姓名"
                             align="center"
                             prop="inventorName" />
            <el-table-column label="身份证件号码"
                             align="center"
                             prop="inventorNo" />
          </el-table>
        </div>
      </el-tab-pane>

      <el-tab-pane label="申请人"
                   name="2">
        <div class="app-container">
          <el-table v-loading="loading"
                    :data="curDetailsObj.applicantList"
                    stripe
                    @selection-change="handleSelectionChange">

            <el-table-column type="selection"
                             align="center" />
            <el-table-column label="姓名"
                             align="center"
                             prop="applicantName" />
            <el-table-column label="身份证件号码"
                             align="center"
                             prop="applicantNo" />
          </el-table>
        </div>
      </el-tab-pane>

    </el-tabs>

  </div>
</template>

<script>
import { getDetails } from '@/api/contract/lu'

export default {
  dicts: [
    //专利类型字典
    'ipms_patend_type',
    'ipms_contract_case_type',
    'ipms_contract_status',
  ],
  data() {
    return {
      // 选中数组
      Nos: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      // 合同表格数据
      contractList: [{ patendTypeId: 1 }],
      // 显示搜索条件
      showSearch: true,
      // 列信息
      columns: [
        { key: 0, visible: true },
        { key: 1, visible: true },
        { key: 2, visible: true },
        { key: 3, visible: true },
        { key: 4, visible: true },
      ],
      curContractCaseList: [{ caseType: 1 }],
      curContractStatusList: [{ contractStatus: 1 }],
      curPatentTypeList: [{ patendType: 1 }],
      curContractObj: {
        contractId: '1', //合同id(系统)
        contractNo: null, //合同编号（系统）
        customerId: null, //客户id
        empId: null, //员工id（系统）
        contractCaseTypeId: null, //业务类型字典
        contractServiceCost: null, //代理服务费
        contractThirdCost: null, //官方费用
        patendId: null, //专利id
        contractStatusId: null, //合同状态
        createTime: null, //合同创建时间
      },

      //合同详情
      curDetailsObj: {
        contractId: null, //合同id
        customerName: '', //顾客联系人
        empName: null, //对接业务员姓名
        patentName: null, //专利名称
        patentNo: null, //专利编号号
        patendType: null, //专利类型（字典）
        patentFileUrl: null, //专利材料oss url
        patentIconUrl: null, //专利图标oss url
        inventorList: [], //发明人列表
        applicantList: [], //申请人列表
      },
    }
  },
  //@iCAN 计算属性 获取vuex全局customerId
  computed: {
    contractObj() {
      return this.$store.state.user.contractObj
    },
  },

  //@ iCAN 监听vuex全局contractObj
  watch: {
    contractObj: {
      handler: function (val, oldVal) {
        if (val != null) {
          this.curContractObj = val
          this.curContractCaseList[0].caseType =
            this.curContractObj.contractCaseTypeId
          this.curContractStatusList[0].contractStatus =
            this.curContractObj.contractStatusId
          getDetails(this.curContractObj).then((resp) => {
            console.log('获取详情信息', resp)
            this.curDetailsObj = resp.data
            this.curPatentTypeList[0].patendType = this.curDetailsObj.patendType
          })
        } else {
        }
      },
      // 刷新页面时立即执行
      immediate: true,
    },
  },
  methods: {
    /* Tabs标签 */
    handleClick(tab, event) {
      console.log('activeName:', this.activeName)
      if (this.activeName == 0) {
        this.$message.success('专利信息')
      } else if (this.activeName == 1) {
        this.$message.success('发明人')
      } else if (this.activeName == 2) {
        this.$message.success('申请人')
      }
    },

    //字典翻译
    formatPatentType(row) {
      return this.selectDictLabel(
        this.dict.type.ipms_patend_type,
        row.patendTypeId
      )
    },
    formatContractCaseType(row) {
      return this.selectDictLabel(
        this.dict.type.ipms_contract_case_type,
        row.caseType
      )
    },
    formatContractStatusType(row) {
      return this.selectDictLabel(
        this.dict.type.ipms_contract_status,
        row.contractStatus
      )
    },
    formatPatentType(row) {
      return this.selectDictLabel(
        this.dict.type.ipms_patend_type,
        row.patendType
      )
    },
  },
}
</script>
<style lang="stylus" scoped></style>